<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css"
    />
    <script src="../../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/yonghu.css" />
    <link rel="stylesheet" href="../../src/font/字体图标/iconfont.css" />
    <script src="../../src/font/字体图标/iconfont.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="shan-box">
          <div id="modal">
            <span>确认移除后，部门人员所处部门信息将会被清空</span>
            <div class="btn">
              <button id="qx">取消</button>
              <button id="qd">确定</button>
            </div>
          </div>
        </div>

        <div id="search">
          <label>
            <input type="text" id="userName" placeholder="请输入人员名称" />
          </label>
          <button id="btn-search">
            <span class="iconfont icon-chaxun"></span> 查询
          </button>
          <button id="btn-reset">重置</button>
        </div>
      </div>
      <div id="myTable" class="row">
        <table class="col-lg-12">
          <thead>
            <tr>
              <th>人员名称</th>
              <th>人员头像</th>
              <th>人员性别</th>
              <th>人员类型</th>
              <th>职务等级</th>
              <th>联系方式</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
        <div id="pageDiv">
          <div id="allPage"></div>
          <select>
            <option value="1">10条/页</option>
          </select>
          <span id="pre"> < </span>

          <span class="page">1</span>

          <span id="next"> > </span>
          <div id="tiaozhuan">
            <span>前往</span>
            <input type="text" id="tiaopage" />
            <span>页</span>
            <button id="tiao">跳转</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    let arr = [
      {
        id: 1,
        name: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "负责人",
        level: "院长",
        num: "18868803516",
      },
      {
        id: 2,
        name: "Mr.Wang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "副院长",
        num: "18868803516",
      },
      {
        id: 3,
        name: "Mr.Huang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 4,
        name: "Mr.Wu",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 5,
        name: "会飞的松鼠",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 6,
        name: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "负责人",
        level: "",
        num: "18868803516",
      },
      {
        id: 7,
        name: "Mr.Wang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 8,
        name: "Mr.Huang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 9,
        name: "Mr.Wu",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 10,
        name: "会飞的松鼠",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 11,
        name: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "负责人",
        level: "",
        num: "18868803516",
      },
      {
        id: 12,
        name: "Mr.Wang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 13,
        name: "Mr.Huang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 14,
        name: "Mr.Wu",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 15,
        name: "会飞的松鼠",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 16,
        name: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "负责人",
        level: "",
        num: "18868803516",
      },
      {
        id: 17,
        name: "Mr.Wang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 18,
        name: "Mr.Huang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 19,
        name: "Mr.Wu",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 20,
        name: "会飞的松鼠",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 21,
        name: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "负责人",
        level: "",
        num: "18868803516",
      },
      {
        id: 22,
        name: "Mr.Wang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 23,
        name: "Mr.Huang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 24,
        name: "Mr.Wu",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 25,
        name: "会飞的松鼠",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 26,
        name: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "负责人",
        level: "",
        num: "18868803516",
      },
      {
        id: 27,
        name: "Mr.Wang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 28,
        name: "Mr.Huang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 29,
        name: "Mr.Wu",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 30,
        name: "会飞的松鼠",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 31,
        name: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "负责人",
        level: "",
        num: "18868803516",
      },
      {
        id: 32,
        name: "Mr.Wang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 33,
        name: "Mr.Huang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 34,
        name: "Mr.Wu",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 35,
        name: "会飞的松鼠",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 36,
        name: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "负责人",
        level: "",
        num: "18868803516",
      },
      {
        id: 37,
        name: "Mr.Wang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 38,
        name: "Mr.Huang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 39,
        name: "Mr.Wu",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 40,
        name: "会飞的松鼠",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 41,
        name: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "负责人",
        level: "",
        num: "18868803516",
      },
      {
        id: 42,
        name: "Mr.Wang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 43,
        name: "Mr.Huang",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 44,
        name: "Mr.Wu",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 0,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
      {
        id: 45,
        name: "会飞的松鼠",
        icon: "iconfont icon-tuxiang-mianxing",
        sex: 1,
        type: "普通成员",
        level: "",
        num: "18868803516",
      },
    ];
    let searchArr = [];
    let dangqianyeData = [];
    let maxPage;
    let dangqianyePage = 1;
    let delId;
    search();
    // 查询
    $("#btn-search").click(function () {
      dangqianyePage = 1;
      search();
    });

    // search函数
    function search() {
      let userName = $("#userName").val();
      searchArr = [...arr];

      if (userName != "") {
        for (let i = 0; i < searchArr.length; i++) {
          if (userName != searchArr[i].name) {
            searchArr.splice(i, 1);
            i--;
          }
        }
      }
      showPage(searchArr);
      showData(searchArr, dangqianyePage);
    }

    // 重置数据
    $("#btn-reset").click(function () {
      dangqianyePage = 1;
      $("#userName").val("");
      search();
    });

    // 渲染tbody
    function show(data) {
      $("tbody").html("");
      for (let i = 0; i < data.length; i++) {
        $("tbody").append(`
        <tr>
            <td>${data[i].name}</td>
            <td><span class='${data[i].icon}'></span></td>
            <td>${data[i].sex == 0 ? "女" : "男"}</td>
            <td>${data[i].type}</td>
            <td>${data[i].level}</td>
            <td>${data[i].num}</td>
            <td>
                <button data-id='${data[i].id}' class='shan'>移除</button>
            </td>
        </tr>
    `);
      }
    }

    // 渲染页码样式
    function showPage(data) {
      maxPage = Math.ceil(data.length / 10);
      $("#allPage").text(`共${data.length}条`);
      $(".page").html("");
      for (let i = 1; i <= maxPage; i++) {
        $(".page").append(`<span class='addPage'>${i}</span>`);
      }
    }

    // 截取数据 渲染相应数据
    function showData(data, pageNum) {
      let qishi = (pageNum - 1) * 10;
      dangqianyeData = data.slice(qishi, qishi + 10);
      show(dangqianyeData);
      $(".addPage")
        .eq(pageNum - 1)
        .addClass("active1")
        .siblings()
        .removeClass("active1");
      dangqianyePage = pageNum;
    }

    //  点击页码 渲染相应的数据
    $(".page").on("click", ".addPage", function () {
      showData(searchArr, parseInt($(this).text()));
    });

    // 上一页
    $("#pre").click(function () {
      if (dangqianyePage > 1) {
        let shangyiye = dangqianyePage - 1;
        showData(searchArr, shangyiye);
      }
    });

    // 下一页
    $("#next").click(function () {
      if (dangqianyePage < maxPage) {
        let xiayiye = dangqianyePage + 1;
        showData(searchArr, xiayiye);
      }
    });

    // 跳转页面
    $("#tiao").click(function () {
      console.log($("#tiaopage").val());
      let tiaopage = $("#tiaopage").val();
      for (let i = 1; i <= maxPage; i++) {
        if (tiaopage == i) {
          dangqianyePage = tiaopage;
        }
      }
      showData(searchArr, dangqianyePage);
    });

    // 移除
    $("tbody").on("click", ".shan", function () {
      $(".shan-box").css({ display: "block" });
      delId = $(this).attr("data-id");
    });
    // 移除取消按钮
    $("#qx").click(function () {
      $(".shan-box").css({ display: "none" });
    });
    // 移除确定按钮
    $("#qd").click(function () {
      for (let i = 0; i < arr.length; i++) {
        if (delId == arr[i].id) {
          arr.splice(i, 1);
        }
      }
      search();
      $(".shan-box").css({ display: "none" });
    });
  </script>
</html>
